<template>
  <div class="navbar newindex">
    <ClientOnly>
      <div class="container flex items-center h-[60px]">
        <nuxt-link to="/"><img class="pr tp2" src="/imgs/logo.png" width="110"/></nuxt-link>
        <ui-menu>
          <template v-for="(item,index) in platFormStore.channelList" :key="index">
            <ui-menu-item  :active="isMenuItemActive(item)" @click="handleOpen(item.url)" v-if="item.title=='文章' && (userStore.authorFlag == 1 || userStore.role == 'admin')">
              {{ item.title }}
              <i class="icn-new" v-if="item.newFlag == 1"></i>
            </ui-menu-item>
            <ui-menu-item  :active="isMenuItemActive(item)" @click="handleOpen(item.url)" v-if="item.title!='文章'">
              {{ item.title }}
              <i class="icn-new" v-if="item.newFlag == 1"></i>
            </ui-menu-item>
          </template>
        </ui-menu>
        <n-button v-if="false" circle class="ml-auto mr-3" @click="openSearch">
          <template #icon>
            <n-icon>
              <Search/>
            </n-icon>
          </template>
        </n-button>
        <div v-else class="ml-auto mr-3"></div>
        <a href="javascript:void(0);" @click="handleOpenVip" v-if="userStore.isLogin && false" class="px-5 flex"><img width="20" class="mr5 pr tp1" src="/imgs/suser.png"/>会员中心</a>
        <n-dropdown :options="messageOptions" @select="handleSelectMessage" v-if="userStore.isLogin">
          <span  class="px-5 dotmsg">消息 <span v-if="messageTotal>0">({{messageTotal}})</span> <span v-if="messageTotal>0" class="dotred"></span> </span>
        </n-dropdown>
        <n-dropdown :options="userOptions" @select="handleSelect" v-if="userStore.isLogin">
          <img style="width: 32px;height:32px;border-radius: 50%;" v-lazy="userAvatar"/>
        </n-dropdown>
          <nuxt-link :to="'/login?from=' + $route.fullPath" v-if="!userStore.isLogin">
            <n-button secondary strong>登录</n-button>
          </nuxt-link>
      </div>
      <!--全局搜索-->
      <ksd-search-bar ref="SearchBarRef"/>
      <!--全局登录弹窗-->
      <k-login @success="handleLoadLoginSuccess"></k-login>
      <!--全局登录弹窗-->
      <ksd-vip ref="vipRef"></ksd-vip>
    </ClientOnly>
  </div>
</template>
<script setup>
const vipRef = ref({})
const SearchBarRef = ref({})
const route = useRoute()
// 获取到状态管理
const userStore = useStore.userState()
const platFormStore =  useStore.platformState()
const messageOptions = ref([])
const messageTotal = ref(0)
const userAvatar = computed(()=>userStore.avatar)

const handleLoadLoginSuccess = ()=>{
  handleCountMessage()
}

// 如果登录，就在菜单上增加我的按钮。可以快速进入到我的个人中心中去我自己相关的业务
function handleOpen(path) {
  navigateTo(path)
}

// 打开会员中心
const handleOpenVip = () => {
  vipRef.value.handleOpen()
}

// 打开搜索的弹窗
const openSearch = () => SearchBarRef.value.open()

// 激活导航
const isMenuItemActive = (item) => {
  return route.path == item.url || route.path.indexOf(item.url == '/' ? '-1' : item.url) != -1
}

// 菜单下拉数据
const userOptions = [
  {
    label: userStore?.nickname,
    key: "username",
  },{
    label: "我的课程",
    key: "zone",
  },
  ,{
    label: "我的购买",
    key: "buy",
  },{
    label: "账户设置",
    key: "settings",
  }, {
    label: "退出",
    key: "logout",
  }]

// 统计跳转
const handleSelect = (k) => {
  switch (k) {
    case "logout":
      useDialog().warning({
        content: "是否要退出登录？",
        positiveText: "退出",
        negativeText: "取消",
        onPositiveClick: async () => {
          // 退出逻辑
          await useLogout()
        },
      });
      break;
    case "username" :
    case "center":
      navigateTo("/index/user")
      break;
    case "zone" :
      navigateTo("/index/user/special/list")
      break;
    case "wallet" :
      navigateTo("/index/user/wallet")
      break;
    case "fans" :
      navigateTo("/index/user/fans/list")
      break;
    case "buy" :
      navigateTo("/index/user/buy")
      break;
    case "settings" :
      navigateTo("/index/user")
      break;
  }
}

// 统计消息
const handleCountMessage =  () => {
  useIsLoginPromise().then(async()=>{
    const resp = await useCountMessageApi()
    var messageList = resp.data.map(c=>{
      var person = {}
      person.label = c.label +(c.mnum>0 ?"("+c.mnum+")":'')
      person.key = c.ckey
      messageTotal.value += c.mnum*1
      return person
    })
    messageOptions.value = messageList
  }).catch(e=>{})
}

// 统计跳转
const handleSelectMessage = (k) => {
  switch (k) {
    case "me" :
      navigateTo("/user/message/list?tab=me")
      break;
    case "system":
      navigateTo("/user/message/list?tab=system")
      useSaveUpdatePointMessageApi(1)
      break;
    case "note":
      navigateTo("/user/message/list?tab=note")
      useSaveUpdatePointMessageApi(2)
      break;
  }
}

onMounted(()=>{
  handleCountMessage()
  if(process.client){
    window.addEventListener("scroll",function(e){
      var stop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var dom = document.querySelector(".navbar");
      if(stop>=50){
        if(dom)dom.className = "navbar fixed"
      }else{
        if(dom)dom.className = useRoute().fullPath == '/' ? "navbar" : "navbar newindex"
      }
    })
  }
})

</script>
<style lang="scss">
.navbar {
  z-index: 1000;
  background: #fff;
  @apply bg-white top-0 left-0 right-0 shadow-sm sticky;
  border-bottom:1px solid #eee;
}
.navbar.fixed{background:rgba(255,255,255)!important;color:#333!important;}
.menu-item{position: relative}
.menu-item .icn-new {
  position: absolute;
  display: inline-block;
  top: 0px;
  left:36px;
  width: 14px;
  height: 10px;
  background: url(/imgs/new2.png) no-repeat 0 0;
  background-size: 100%;
  background-position: center;
}
</style>
